<template>
  <div class="step-four">
    <Header :active-step="currentStep" />
    <h3>企业认证</h3>
    <el-form :model="form" :rules="rules" ref="form" label-width="160px" style="width: 590px; margin: 20px auto;">
      <el-form-item label="营业执照" prop="license">
        <el-upload action="#" :auto-upload="false" :on-change="handleLicenseUpload">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">请上传营业执照扫描件或照片（jpg/png格式）</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="法人身份证" prop="idCard">
        <el-upload action="#" :auto-upload="false" :on-change="handleIdCardUpload">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">请上传法人身份证正反面（jpg/png格式）</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class="step-buttons">
      <el-button @click="$emit('prev')">上一步</el-button>
      <el-button type="danger" @click="submit">提交认证</el-button>
    </div>
  </div>
</template>

<script>
import { submitCertification } from '@/api/auth/auth';
import Header from '@/views/auth/Header.vue'

export default {
  name: 'StepFour',
  data() {
    return {
      form: { license: null, idCard: null },
      rules: {
        license: [{ required: true, message: '请上传营业执照', trigger: 'change' }],
        idCard: [{ required: true, message: '请上传法人身份证', trigger: 'change' }]
      }
    };
  },
  methods: {
    Header,
    handleLicenseUpload(file) {
      this.form.license = file.raw;
    },
    handleIdCardUpload(file) {
      this.form.idCard = file.raw;
    },
    async submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const formData = new FormData();
            formData.append('license', this.form.license);
            formData.append('idCard', this.form.idCard);
            await submitCertification(formData);
            this.$message.success('企业认证提交成功');
            this.$emit('next', 4);
          } catch (error) {
            this.$message.error('提交失败');
          }
        } else {
          this.$message.error('请上传所需文件');
        }
      });
    }
  }
};
</script>

<style scoped>
.step-four {
  padding: 20px;
}
.step-buttons {
  margin-top: 20px;
}
.step-buttons .el-button {
  margin: 0 10px;
}
</style>
